.preview-function{
  text-align: center;
  margin: 20px auto;
}
.preview-item{
  margin: 10px auto;
}

.model-phone-warp {
  padding-top: 1px;
  width: 361px;
  height: 744px;
  background: url("/assets/images/phone-case.png") no-repeat center;
  background-size: 100% 100%;
  margin: 0 auto;
}
.phone-content{
  margin-top: 87px;
  margin-left: 22px;
  width: 320px;
  height: 568px;
  overflow-y: scroll;
  background: #dcdcdc;

  //img{
  //  width: 100%;
  //}
}
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
.phone-content::-webkit-scrollbar{
  width: 1px;
  height: 4px;
  background-color: transparent;
}
/*定义滚动条的轨道，内阴影及圆角*/
.phone-content::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: rgba(20,28,38,.7);
}
/*定义滑块，内阴影及圆角*/
.phone-content::-webkit-scrollbar-thumb{
  /*width: 10px;*/
  height: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: rgba(240,240,240,.4);
}
.phone-header{
  width: 100%;
  height: 50px;
  background: #000 url("/assets/images/topbar_white29bc6c.png") no-repeat center 5px;
  background-size: auto;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  padding-top: 25px;
  line-height: 20px;
}
.logo-name{
  height: 60px;
  padding: 10px 15px;
  overflow: hidden;
  background: #ffffff;
}
.name{
  float: left;
  color: #7dbb5d;
  font-size: 20px;
  line-height: 40px;
}
.logo{
  float: right;
  height: 40px;

  img{
    height: 100%;
    width: auto;
  }
}
.search-content{
  img{
    width: 100%;
    display: block;
  }
}

:host /deep/ .carousel-indicators{
  bottom: -10px;
  li{
    margin: 0 5px;
  }
}
:host /deep/ .carousel-inner{
  img{
    width: 100%;
  }
}
.store-message{
  margin: 7px 0;
  padding: 7px 20px;
  border-left: 7px solid #b41a72;
  background: #f0eade;
  line-height: 30px;
  font-size: 13px;
  color: #636363;

  .iconfont{
    font-size: 14px;
    margin-right: 4px;
  }
  .icon-right{
    float: right;
  }
}
.product-type{
  display: flex;
  display: -webkit-flex;
  background: #09262d;
  margin: 7px 0;
}
.product-type-item{
  flex: 1;
  -webkit-flex: 1;
  padding: 30px 0;
}
.product-type-item-info{
  margin: 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 100%;
  background-color: #f0eade;
  text-align: center;
  line-height: 54px;
  font-size: 20px;
  display: block;
}
.product-list-first{
  background: #140e07;
  padding-top: 20px;
  padding-bottom: 1px;

  .total-title{
    width: 258px;
    height: 31px;
    margin: 0 auto;
    background: url("/assets/images/product-total-title.jpg") no-repeat center;
    background-size: cover;
    text-align: center;
    line-height: 31px;
    font-size: 12px;
    color: #e9ce98;
  }
  .product-photo{
    width: 100%;

    img{
      width: 100%;
    }
  }
  .product-title{
    width: 278px;
    height: 20px;
    margin: 0 auto;
    background: url("/assets/images/product1-title.png") no-repeat center;
    background-size: cover;
    margin-bottom: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #e9ce98;
  }
}
.product-list-second{
  background: #c7b28d;
  overflow: hidden;

  .total-title{
    text-align: center;
    display: block;
    width: 90px;
    line-height: 20px;
    height: 40px;
    font-size: 13px;
    position: relative;
    background: #c7b28d;
    margin: 0 auto;
    padding: 10px 0;

    .total-title-msg{
      position: relative;
      z-index: 2;
      width: 100%;
      background: #c7b28d;
      display: block;
    }
    &:after{
      content: '';
      display: block;
      width: 260px;
      position: absolute;
      height: 1px;
      background-color: #333;
      top: 50%;
      left: -86px;
    }
  }
  .product-item{
    width: 50%;
    padding: 0 7px 7px 7px;
    float: left;

    &:nth-child(2n){

      .product-photo{
        margin: 0 0 0 auto;
      }
      .product-title{
        margin: 0 0 0 auto;
      }
    }

    .product-photo{
      width: 140px;
      height: 82px;
      overflow: hidden;

      img{
        width: 100%;
        height: 100%;
      }
    }
    .product-title{
      width: 140px;
      margin-top: 1px;
      font-size: 12px;
      text-align: center;
      background: #f0eade;
      line-height: 22px;
    }
  }
}
.company-message{
  font-size: 12px;
  text-align: center;
  padding-bottom: 10px;
}
.more-tips{
  line-height: 28px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #dddddd;
  font-size: 14px;
  display: inline-block;
  margin: 10px 0;
  width: 80%;
}
.nav{
  display: flex;
  display: -webkit-flex;
  background: #ffffff;
}
.tab{
  flex: 1;
  -webkit-flex: 1;
}
.tab-icon{
  text-align: center;
  font-size: 16px;
}
.tab-name{
  text-align: center;
}
.tab-active{
  color: #b41a72;
}
